<template>
  <div>
    <h1></h1>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input
            placeholder="输入菜单名称"
            prefix-icon="el-icon-search"
            @keyup.enter.native="search"
            v-model="name" clearable>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-input
            placeholder="菜单状态"
            prefix-icon="el-icon-search"
            @keyup.enter.native="search"
            v-model="statu" clearable>
        </el-input>
      </el-col>
      <el-col :span="14">
        <el-button type="warning" @click="search" class="add-button">查询</el-button>
        <el-button type="info" @click="reset" class="add-button">重置</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="warning" @click="addMenu('')" class="add-button">新建菜单</el-button>
      </el-col>
      <el-col :span="24">
        <el-table
            :data="tableData"
            style="width: 100%"
            row-key="menuId"
            :tree-props="{children: 'children'}"
        >
          <el-table-column
              prop="menuName"
              label="菜单名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="icon"
              label="图标">
            <template v-slot="scope">
              <i :class="scope.row.icon" style="font-size: 20px"/>
            </template>
          </el-table-column>
          <!--          <el-table-column
                        prop="orderNum"
                        label="排序">
                    </el-table-column>-->
          <el-table-column
              prop="perms"
              label="权限标识">
          </el-table-column>
          <el-table-column
              prop="component"
              label="组件路径">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态">
            <template v-slot="scope">
              <el-switch
                  @change="setStatus(scope.row)"
                  active-value="0"
                  inactive-value="1"
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="创建时间">
          </el-table-column>
          <el-table-column
              label="操作">
            <template v-slot="scope">
              <div class="button-group">
                <el-button @click="editMenu(scope.row.menuId)" size="mini">修改</el-button>
                <el-button type="warning" @click="addMenu('')" size="mini">新增</el-button>
                <el-button type="danger" @click="deleteMenu(scope.row.menuId)" size="mini">删除</el-button>
              </div>
            </template>


          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <!--   数据分页
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :current-page="currentPage"
                :total="total"-->
        <!--        <el-pagination


                    :page-sizes="[5, 10, 15, 20]"

                    layout="total, sizes, prev, pager, next, jumper"
                    >
                </el-pagination>-->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from "@/utils/request";
import buildTree from "@/utils/buildTree";

export default {
  data() {
    return {
//      pageSize: 5,
//      total: 0,
//      currentPage: 1,
      name: "",
      statu: "",
      menuName: "",
      orderNum: "",
      icon: "",
      perms: "",
      component: "",
      status: "",
      tableData: []
    }
  },
  created() {
    this.loadData()
  },

  methods: {
    //接入数据库数据信息以及树形展示
    async loadData() {
      let data = await request("menu?menuName=" + this.name)
      this.tableData = buildTree(data, 0)

    },
    //重置搜索框
    reset() {
      this.name = ""; // 点击重置按钮时，将name属性重置为空字符串
      this.statu = ""; // 点击重置按钮时，将name属性重置为空字符串
    },
    //模糊查询
    search() {
      this.loadData()
    },

    /*数据分页操作
        handleSizeChange(i) {
          this.pageSize = i;
          this.currentPage = 1
          this.loadData()
        },
        handleCurrentChange(i) {
          this.currentPage = i;
          this.loadData()
        },*/

//新增菜单
    addMenu(menuId) {
      this.$router.push("/index/addMenu?menuId=" + menuId)
    },

//编辑菜单
    editMenu(menuId) {
      this.$router.push("/index/addMenu?menuId=" + menuId)
    },


    //修改菜单状态
    setStatus({menuId, status}) {
      console.log(menuId, status)
      request("menu", "put", {menuId, status}).then(() => {
        this.$message.success("操作成功")
      }).catch(() => {
        this.$message.success("操作失败")
      })
    },

//删除菜单
    deleteMenu(menuId) {
      console.log(menuId)
      this.$confirm('确定永久删除此菜单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request("menu?menuId=" + menuId, "delete").then(() => {
          this.$message.success("删除成功~")
          this.loadData();
        }).catch(() => {
          this.$message.error("删除失败~")
        })
      })
    }
  }
}
</script>

<style scoped>
.add-link1 {

  color: red;
}

.add-link2 {

  color: #409EFF;
}

.add-link3 {

  color: red;
}

 .button-group {
   display: flex;
   justify-content: space-between;
 }

/*
.add-button {
  color: #222;
}
*/


</style>